<script setup lang="ts">
import { ref } from "vue";
import tree from "./com/tree.vue";
import { flowdesHook } from "./flowdesHook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import workflow from "@/views/workflow/com.vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

defineOptions({
  name: "User"
});

const formRef = ref();
const {
  dialogFlowVisible,
  form,
  editorRef,
  toolbarConfig,
  mode,
  valueHtml,
  editorConfig,
  handleCreated,
  openflow,

  jiaqian,
  openzhuanfa,
  zhuanfaVisible,
  chehui,
  tableData,
  handleSelectionChange,
  cuibanVisible,
  opencuiban,
  openshoucang,
  jiaobanVisible,
  openjiaoban,
  opentuihuichongtian,
  openzhidingtuihui,
  zhidingtuihuiVisible,
  tuihuichongtianVisible,
  openzhongzhi,
  opendetail,
  detailVisible,
  detailtype,
  columns1,
  columns2,
  columns3,
  tableData1,
  tableData2,
  tableData3
} = flowdesHook();
</script>

<template>
  <section class="main">
    <section class="tablepa">
      <el-card>
        <el-row class="rows space">
          <h2>起草</h2>
          <h2>
            <el-icon><CloseBold /></el-icon>
          </h2>
        </el-row>
        <el-divider />
        <div>
          <el-button size="large" @click="jiaqian"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;加签</el-button
          >
          <el-button size="large"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;转签</el-button
          >
          <el-button size="large" @click="openjiaoban"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;交办</el-button
          >
          <el-button size="large" @click="opencuiban"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;催办</el-button
          >

          <el-dropdown trigger="click" class="m-l-10" size="large">
            <el-button size="large"
              ><el-icon><MoreFilled /></el-icon
            ></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openshoucang"
                  ><div class="btnicon">
                    <img src="./btnimg/1.png" />
                  </div>
                  &nbsp;收藏</el-dropdown-item
                >
                <el-dropdown-item @click="openshoucang"
                  ><div class="btnicon">
                    <img src="./btnimg/1.png" />
                  </div>
                  &nbsp;取消收藏</el-dropdown-item
                >
                <el-dropdown-item @click="openzhongzhi"
                  ><div class="btnicon">
                    <img src="./btnimg/1.png" />
                  </div>
                  &nbsp;中止</el-dropdown-item
                >
                <el-dropdown-item
                  ><div class="btnicon">
                    <img src="./btnimg/1.png" />
                  </div>
                  &nbsp;打印</el-dropdown-item
                >
                <el-dropdown-item @click="opendetail"
                  ><div class="btnicon">
                    <img src="./btnimg/1.png" />
                  </div>
                  &nbsp;流程查看</el-dropdown-item
                >
                <el-dropdown-item
                  ><div class="btnicon">
                    <img src="./btnimg/1.png" />
                  </div>
                  &nbsp;知会</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <br />
        <div>
          <el-button size="large" @click="openzhidingtuihui"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;指定退回</el-button
          >
          <el-button size="large" @click="opentuihuichongtian"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;退回重填</el-button
          >
          <el-button size="large" @click="openzhuanfa"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;转发</el-button
          >
          <el-button size="large" @click="chehui"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;撤回</el-button
          >
        </div>
        <br />
        <el-divider />
        <br />
        <div class="wangeditor">
          <Toolbar
            style="border: 1px solid #ccc; border-bottom: 0"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 150px; overflow-y: auto; border: 1px solid #ccc"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
        <br />
        <div>
          常用语：
          <el-select
            v-model="form.status"
            placeholder="请选择常用语"
            clearable
            class="!w-[160px]"
          >
            <el-option label="同意" value="1" />
            <el-option label="不同意" value="0" />
          </el-select>
        </div>
        <div class="submitzone">
          <el-button size="large"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;保存</el-button
          >
          <el-button size="large" type="primary"
            ><div class="btnicon">
              <img src="./btnimg/1.png" />
            </div>
            &nbsp;提交</el-button
          >
        </div>
        <div>
          意见隐藏：
          <el-switch v-model="form.status" />
        </div>
        <div>
          不包括：
          <el-select
            v-model="form.status"
            placeholder="请选择常用语"
            clearable
            class="!w-[160px]"
          >
            <el-option label="同意" value="1" />
            <el-option label="不同意" value="0" />
          </el-select>
        </div>
        <br />
        <el-button size="large" type="primary" @click="openflow"
          ><div class="btnicon">
            <img src="./btnimg/1.png" />
          </div>
          &nbsp;查看流程</el-button
        >
      </el-card>
    </section>
    <!-- 转发 -->
    <el-dialog v-model="zhuanfaVisible" title="转发审批" width="800px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="选择人员:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="模式：">
          <el-radio-group v-model="form.resource">
            <el-radio label="串发" />
            <el-radio label="并发" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="转发原意见" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="onSubmit">上传附件</el-button>
          <el-button>关联</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="zhuanfaVisible = false">取消</el-button>
          <el-button type="primary" @click="zhuanfaVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 催办 -->
    <el-dialog v-model="cuibanVisible" title="催办" width="800px">
      <div>请选择催办人员</div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="address" label="节点名称" />
        <el-table-column prop="address" label="审批人" />
      </el-table>
      <br />
      <div>
        附言:<el-input
          v-model="textarea"
          maxlength="1000"
          placeholder="Please input"
          show-word-limit
          type="textarea"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="zhuanfaVisible = false">取消</el-button>
          <el-button type="primary" @click="zhuanfaVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 交办 -->
    <el-dialog v-model="jiaobanVisible" title="交办任务" width="800px">
      <!-- 交办描述 -->
      <section>
        <div>交办单据：张三-请假申请单（2022-12-08）</div>
        <br />
        <div>请选择需要交办的人员</div>
        <div>*被交办人员：<el-button type="primary"> 设置 </el-button></div>
        <br />
        <div><el-tag>张三</el-tag>&emsp;<el-tag>张三</el-tag></div>
        <br />
        <div>
          交办描述:<el-input
            v-model="textarea"
            maxlength="1000"
            placeholder="请输入"
            show-word-limit
            type="textarea"
          />
        </div>
        <div>
          *交办触发逻辑：
          <el-radio-group v-model="form.resource">
            <el-radio label="立即触发" />
            <el-radio label="流程完成后触发" />
          </el-radio-group>
        </div>
      </section>
      <!-- 交办反馈 -->
      <section>
        <div>交办单据：张三-请假申请单（2022-12-08）</div>
        <br />
        <div>
          交办描述:<el-input
            v-model="textarea"
            maxlength="1000"
            placeholder="请输入"
            show-word-limit
            type="textarea"
          />
        </div>
        <div>
          交办反馈:<el-input
            v-model="textarea"
            maxlength="1000"
            placeholder="请输入"
            show-word-limit
            type="textarea"
          />
        </div>
        <div>
          *完成状态:
          <el-radio-group v-model="form.resource">
            <el-radio label="未完成" />
            <el-radio label="完成" />
          </el-radio-group>
        </div>
      </section>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="zhuanfaVisible = false">取消</el-button>
          <el-button type="primary" @click="zhuanfaVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 指定退回 -->
    <el-dialog v-model="zhidingtuihuiVisible" title="指定退回" width="800px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="退回到：">
          <el-input
            v-model="form.textarea"
            maxlength="64"
            placeholder="退回人"
          />
        </el-form-item>

        <el-form-item label="张三处理后：">
          <el-radio-group v-model="form.resource">
            <el-radio label="重新审批" />
            <el-radio label="直送至我" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div>
        <el-input
          v-model="textarea"
          maxlength="1000"
          placeholder="请输入审批意见"
          show-word-limit
          type="textarea"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="zhidingtuihuiVisible = false">取消</el-button>
          <el-button type="primary" @click="zhidingtuihuiVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 退回重填 -->
    <el-dialog v-model="tuihuichongtianVisible" title="退回重填" width="800px">
      <p>发起人：张三</p>
      <el-form :model="form" label-width="120px">
        <el-form-item label="张三处理后：">
          <el-radio-group v-model="form.resource">
            <el-radio label="重新审批" />
            <el-radio label="直送至我" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div>
        <el-input
          v-model="textarea"
          maxlength="1000"
          placeholder="请输入审批意见"
          show-word-limit
          type="textarea"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tuihuichongtianVisible = false">取消</el-button>
          <el-button type="primary" @click="tuihuichongtianVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="detailVisible"
      title="流程设计"
      width="1300px"
      top="20px"
    >
      <div>
        <el-radio-group v-model="detailtype">
          <el-radio-button label="流程图" />
          <el-radio-button label="流程操作日志" />
        </el-radio-group>
      </div>
      <br />
      <section class="workflowbox" v-show="detailtype == '流程图'">
        <workflow />
      </section>
      <section class="workflowbox" v-show="detailtype == '流程操作日志'">
        <p>流转记录</p>
        <pure-table
          :data="tableData1"
          element-loading-text="查询中，请稍后..."
          :columns="columns1"
          row-key="id"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
          style="margin-top: 12px; margin-bottom: 20px"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
        </pure-table>

        <p>知会记录</p>
        <pure-table
          :data="tableData2"
          element-loading-text="查询中，请稍后..."
          :columns="columns2"
          row-key="id"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
          style="margin-top: 12px; margin-bottom: 20px"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
        </pure-table>

        <p>催办记录</p>
        <pure-table
          :data="tableData3"
          element-loading-text="查询中，请稍后..."
          :columns="columns3"
          row-key="id"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
          style="margin-top: 12px; margin-bottom: 20px"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
        </pure-table>
      </section>
    </el-dialog>
    <el-dialog
      v-model="dialogFlowVisible"
      title="流程设计"
      width="1300px"
      top="20px"
    >
      <section class="workflowbox">
        <workflow />
      </section>
    </el-dialog>
  </section>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
.main {
  width: 100%;
  display: flex;
}
.main-content {
  margin: 0;
}
.el-card {
  margin-top: 0;
  margin-bottom: 0;
}
.from {
  width: calc(100% - 515px);
}
.tablepa {
}
.detailform {
  margin-top: 25px;
  max-width: 500px;
}
.rows {
  display: flex;
}
.space {
  justify-content: space-between;
  font-size: 20px;
}
.tablerows {
  background: #faf9f9;
  border-bottom: 1px solid #eee;
  width: 400px;
  height: 48px;
  line-height: 48px;
  display: flex;
  .c1 {
    width: 300px;
    padding-left: 16px;
  }
  .c2 {
    width: 70px;
  }
  .c3 {
    width: 30px;
    font-size: 20px;
  }
  .blue {
    color: #1677ff;
  }
}
.tablehead {
  background: #eff2fa;
}
.workflowbox {
  position: relative;
  width: 100%;
  min-height: 800px;
}
::v-deep .el-dialog__body {
  position: relative;
}
.listunit {
  padding: 0 0 15px 0;
  font-size: 14px;
}
.title {
  font-size: 16px;
  margin-top: 12px;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}
::v-deep .el-input-group__append {
  cursor: pointer;
}
.wlimit {
  width: 500px;
}
.nodata {
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
  .el-icon {
    font-size: 40px;
  }
}
.btnicon {
  width: 16px;
  height: 16px;
  img {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}
.m-l-10 {
  margin-left: 10px;
}
.submitzone {
  text-align: center;
  margin: 15px;
}
</style>
